<template>
  <div>
    <h1>vuex</h1>
    <h3>{{ app }}</h3>
    <h3>{{ version }}</h3>
    <h3>{{ name }}</h3>
    <button @click="upgradeVersion()">升级版本</button>
    <hr>
    <input v-visit type="text">
    <button @click="setName()">改作者</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { getHome, getList } from 'api/index'
export default {
  data () {
    return {
      text: ''
    }
  },
  computed: {
    ...mapState({
      app: 'app'
    }),
    ...mapGetters({
      version: 'version',
      name: 'name'
    })
  },
  directives: { // 自定义指令
    visit: {
      inserted: function (el, binding) {
        console.log('我来了')
        el.style.color = 'red'
      },
      unbind (el) {
        console.log('我走了')
      }
    }
  },
  mounted () {
    (async function set (params) {
      let a = await getHome()
      let list = await getList()
      console.log(a)
      console.log(list)
    })()
  },
  methods: {
    upgradeVersion () {
      this.$store.commit('SET_VERSION')
    },
    setName () {
      this.$store.commit('SET_AUTHOR', {
        name: this.text
      })
      // this.$store.commit({
      //   type: 'SET_AUTHOR',
      //   name: this.text
      // })
    }
  }
}
</script>
